<!--  -->
<template>
<div>
    <mt-header title="账号管理">
  <router-link  to  slot="left">
    <mt-button icon="back" @click="$router.back(-1)" style="color:black"></mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
  </mt-header>
  <div class="content">
    <mt-field label="昵称" placeholder="" v-model="UserInfo.UserNickName"></mt-field>
    <mt-field label="个性签名" placeholder="" v-model="UserInfo.UserSignature"></mt-field>
    <mt-field label="修改密码" placeholder="" type="password" v-model="password"></mt-field>
    <div class="button" @click="Sava()">
        <p>保存</p>
    </div>
    <div class="button" @click="QuitUser()">
        <p>退出登录</p>
    </div>
  </div>
</div>
</template>

<script>
  import { Toast } from 'mint-ui';
export default {
data() {
return {
    UserInfo:"",
    password:"",
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
    let userInfo=JSON.parse(localStorage.getItem("userInfo")); //去除localStoreage中的登录状态
  // 如果登录状态为空则跳转到首页
  if(userInfo==null){
    // 路由跳转到首页
    // this.timerGO()
    this.$router.push({
          path:"/UserLogin"
        })
        this.err("未登录")
  }
  if(userInfo.isLogin){
    this.UserInfo=userInfo
    this.getUser()
    // console.log(this.UserInfo)
  }
},
methods:{
    err(a){
          this.toastInstanse=Toast(a);
      },
    QuitUser(){
        this.userInfo={}
        localStorage.clear()
        this.$store.state.userInfo={}
        this.$router.push({path: '/UserLogin'});
        this.err("未登录")
      },
    Sava(){
        if(this.password.length==0){

            // console.log("旧密码")
            var url=`/SetUserInfo?UserName=${this.UserInfo.UserName}&UserNickName=${this.UserInfo.UserNickName}&UserSignature=${this.UserInfo.UserSignature}&UserPassword=${this.UserInfo.UserPwd}`
            this.axios.post(url).then(res=>{
                if(res.data.code==200){
                    this.err("保存成功")
                }
            })      
        }else{
            if(this.password.length<9){
            this.err("最少设置8位密码")
        }else{
            // console.log("新密码")    
            var url1=`/SetUserInfo?UserName=${this.UserInfo.UserName}&UserNickName=${this.UserInfo.UserNickName}&UserSignature=${this.UserInfo.UserSignature}&UserPassword=${this.password}`
        this.axios.post(url1).then(res=>{
            if(res.data.code==200){
                    this.err("保存成功")
                }
            // this.UserInfo=res.data.result
            // console.log(this.UserInfo)
        })      
        }

        }
    },
    getUser(){
        var url=`/GetUser?UserName=${this.UserInfo.uname}`
        this.axios.get(url).then(res=>{
            // console.log(res)
            this.UserInfo=res.data.result
            console.log(this.UserInfo)
        })      
        },
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.mint-header{
    color: black;
    background-color: white;
    font-size: 10px;
}
.button{
    width: 60%;
    margin: 15px 20%;
}
.button p{
    background-color: rgb(27, 174, 174);
    color: white;
    width: 100%;
    text-align: center;
    font-size: 10px;
    border-radius: 20px;
    line-height: 30px;
}
.Sex{
    margin: 0 10px;
    font-size: 10px;
}
.Sex input{
    color: wheat;
}
</style>